<template>
    <div class="appointmentList">
        <searchBoxPax
            :searchform="searchform"
            :search_type_data="search_type_data"
            @cheSelectvalue="cheSelectvalue"
            @searchFun="searchList"
        ></searchBoxPax>
        <div class="select-custom-box">
            <selectCustom
                ref="selectCustom1"
                :option_list="shop_ls_data"
                :select_id="searchform.shopid"
                @cheOptionvalue="cheOptionvalue($event, '1')"
                @openSelect="openSelect('1')"
            ></selectCustom>
            <selectCustom
                ref="selectCustom2"
                :option_list="ucp_ls_data"
                :select_id="searchform.uid_cp"
                @cheOptionvalue="cheOptionvalue($event, '4')"
                @openSelect="openSelect('2')"
            ></selectCustom>
            <selectCustom
                ref="selectCustom3"
                :option_list="group_data"
                :select_id="searchform.group"
                @cheOptionvalue="cheOptionvalue($event, '3')"
                @openSelect="openSelect('3')"
            ></selectCustom>
            <div class="filterBox" @click="filterBoxDialog = true">
                <span>筛选</span>
                <span class="icon-font" style="font-size: 22px; padding-left: 0px">&#xe625;</span>
            </div>
        </div>
        <div class="show-filter-box" v-if="becomeDueIndex !== '' || consumeListIndex !== ''  ">
            <div v-if="becomeDueIndex !== '' " @click="resettingBtnFun(1)">{{becomeDue[becomeDueIndex].name}}过期 <i class="el-icon-close"></i> </div>
            <div v-if="consumeListIndex !== '' " @click="resettingBtnFun(2)" >未消费{{consumeList[consumeListIndex].name}} <i class="el-icon-close"></i> </div>
            <span @click="resettingBtnFun(3)" class="resetting-btn">重置</span>
        </div>
        <div
            class="info-list-box"
            v-infinite-scroll="loadFun"
            v-if="list_data.length > 0"
            :class="isMaskShow?'overflowHide':''"
        >
            <div
                class="info-list-row"
                v-for="(item, index) in list_data"
                :key="index"
            >
                <div class="info-box">
                    <div class="name-info" v-if="item.name || item.cellphone">
                        <div class="name-info-left">
                            <span class="name" v-if="item.name">{{
                                item.name
                            }}</span
                            ><span class="phone" v-if="item.cellphone">{{
                                item.cellphone
                            }}</span>
                        </div>
                        <div class="name-info-right">
                            <el-button
                                size="mini"
                                @click="getRecordList(item.customerid)"
                                >预约记录</el-button
                            >
                        </div>
                    </div>
                    <div class="good-info">
                        <div
                            class="good-info-row"
                            v-for="(good_item, good_index) in item.ls"
                            :class="
                                is_acitve_id == good_item.proid ? 'acitve' : ''
                            "
                            :key="good_index"
                            @click="goAppointment(item, good_item)"
                        >
                        <!-- 长按显示修改有效日期 -->
                        <!-- @mousedown="startTimer" @mouseup="endTimer(good_item.proid)"  -->
                            <div class="img-box">
                                <img
                                    :src="
                                        good_item.img_small
                                            ? good_item.img_small
                                            : img_buf
                                    "
                                />
                            </div>
                            <div class="content-box">
                                <div class="title">
                                    {{ good_item.title }}
                                </div>
                                <div class="doc">
                                    <span>剩余{{ good_item.serv_left }}次</span
                                    ><span>{{ good_item.shop_name }}</span
                                    ><span
                                        >有效期{{ good_item.endtime_txt }}</span
                                    >
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mask-div" v-if="isMaskShow">
                <div class="mask-btn-box">
                    <div class="mask-btn-div" @click="maskDialogIsShow = true,isMaskShow = false">更改有效期</div>
                    <div class="mask-btn-div" @click="isMaskShow = false">取消</div>
                </div>
            </div>
        </div>
        <empty v-else />


        <el-dialog
            title="筛选"
            :visible.sync="filterBoxDialog"
            width="500px"
            :before-close="handleClose">
            <div>
                <div class="tab-filter-box">
                    <p class="tab-filter-p">即将过期</p>
                    <div class="tab-filter-list">
                        <div v-for="(item,index) in becomeDue" @click="becomeDueIndex = index" :class="becomeDueIndex === index?'avater':''" :key="index">{{item.name}}</div>
                    </div>
                </div>
                <div class="tab-filter-box">
                    <p class="tab-filter-p">无消费记录</p>
                    <div class="tab-filter-list">
                        <div v-for="(item,index) in consumeList" @click="consumeListIndex = index" :class="consumeListIndex === index?'avater':''"  :key="index">{{item.name}}</div>
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="resetFun">重 置</el-button>
                <el-button type="primary" @click="tabFilterFun">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog
            title="更改有效日期"
            :visible.sync="maskDialogIsShow"
            width="500px"
            :before-close="handleClose">
            <div>
                <div>
                    <el-radio v-model="maskRadioVal" :label="1">永不过期</el-radio>
                </div>
                <div>
                    <el-radio v-model="maskRadioVal" :label="2">具体日期</el-radio>
                    <el-date-picker
                        @change="maskPickerFun"
                        size="mini"
                        :disabled="maskRadioVal == 2?false:true"
                        v-model="maskPickerVal"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期">
                    </el-date-picker>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="maskDialogIsShow = false">取 消</el-button>
                <el-button type="primary" @click="edifSaveFun">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
import staticConst from "../../js/const/StaticConst.js";
import empty from "../comm/empty.vue";
import searchBoxPax from "../comm/searchBoxPax.vue";
import selectCustom from "../comm/selectCustom.vue";
import config from "@/js/conf/Config.js";


export default {
    components: { empty, searchBoxPax, selectCustom },
    props: [
        "searchform",
        "list_data",
        "shop_ls_data",
        "group_data",
        "search_type_data",
        "activeName",
        "ucp_ls_data",
        "is_acitve_id",
    ],
    data() {
        return {
            img_buf: staticConst.GOOD_IMG,
            filterBoxDialog: false,
            becomeDue: [
                {
                    name: "30天内",
                    Num: "30",
                },
                {
                    name: "60天内",
                    Num: "60",
                },
                {
                    name: "90天内",
                    Num: "90",
                },
                {
                    name: "120天内",
                    Num: "120",
                },
                {
                    name: "150天内",
                    Num: "150",
                },
                {
                    name: "180天内",
                    num: "180",
                },
            ],
            becomeDueIndex: "",
            consumeList: [
                {
                    name: "超7天",
                    Num: "7",
                },
                {
                    name: "超14天",
                    Num: "14",
                },
                {
                    name: "超30天",
                    Num: "30",
                },
                {
                    name: "超60天",
                    Num: "60",
                },
                {
                    name: "超180天",
                    Num: "180",
                },
            ],
            consumeListIndex: "",
            isReamType: false,

            timer: null,  // 计时器变量
            longPress: false,  // 是否长按的标志位

            maskDialogIsShow: false, // 是否显示修改有效日期弹出 
            maskRadioVal: 1,
            maskPickerVal: "",
            endtime_str: "",
            proid: "",
            isMaskShow: false,
        };
    },
    methods: {
        resettingBtnFun (type) {
            if (type == 1) {
                this.becomeDueIndex = "";
            }
            if (type == 2) {
                this.consumeListIndex = "";
            }
            if (type == 3) {
                this.resetFun ();
            }
            this.tabFilterFun ();
        },
        resetFun () { // 重置筛选
          this.consumeListIndex = ""; 
          this.becomeDueIndex = ""; 
        },
        tabFilterFun () { // 提交筛选得到得数据
            this.isReamType = true;
            let obj = {
                outdays: this.becomeDueIndex === "" ? "" : this.becomeDue[this.becomeDueIndex].Num,
                days_nbk: this.consumeListIndex === "" ? "" : this.consumeList[this.consumeListIndex].Num,
            };

            this.cheOptionvalue(obj,'tabFilter');
            this.handleClose ();
            this.isReamType = false;
        },
        handleClose () {
            this.filterBoxDialog = false;
            if (this.isReamType == false) {
                this.resetFun();
            }
        },
        // 去预约
        goAppointment(item, good_item) {
            let data = {
                projectData: [good_item],
                customerInfo: item,
            };
            data.projectData.map((v) => {
                v.serv_left = Number(v.serv_left);
                v.serv_qty = 1;
            });
            this.$emit("goAppointment", data);
        },
        getRecordList(id) {
            this.$emit("getRecordList", id);
        },
        searchList() {
            this.$emit("searchList");
        },
        changeList() {
            this.$emit("changeList");
        },
        loadFun() {
            this.$emit("loadFun");
        },
        cheSelectvalue(id) {
            this.$emit("cheSelectvalue", id);
        },
        showSelectFun() {
            this.$refs.selectCustom1.is_select_show = false;
            this.$refs.selectCustom2.is_select_show = false;
            this.$refs.selectCustom3.is_select_show = false;
        },
        cheOptionvalue(item, type) {
            this.$emit("cheOptionvalue", item, type);
        },
        openSelect(type) {
            for (let i = 1; i < 4; i++) {
                if (i != type) {
                    this.$refs[`selectCustom${i}`].is_select_show = false;
                }
            }
        },


        startTimer() {
            this.timer = setTimeout(() => {
                this.longPress = true;  // 长按时间到，标志位设为true
            }, 500);  // 设置长按时间，单位为毫秒
        },
        endTimer(id) {
            clearTimeout(this.timer);  // 清除计时器
            if (this.longPress) {
                this.longPress = false;  // 重置标志位
                this.proid = id;
                // 执行长按事件处理函数
                this.handleLongPress();
            }
        },
        handleLongPress() {
            console.log("long press");
            this.isMaskShow = true;
            // 在这里处理长按事件
        },
        maskPickerFun (val) {
            this.endtime_str = val;
        },
        
        async edifSaveFun () {
            let url =  config.YY_YUYUE_MYPRO_EDIT_SAVE;
            let endtime_str = this.maskRadioVal == 1? 'ever': this.endtime_str;
            let param = {
                endtime_str: endtime_str,
                proid: this.proid,
            };
            if (this.maskRadioVal == 2 && endtime_str == "") return this.$message.error('请选择日期！');
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1) {
                this.$message({
                    message: res.msg,
                    type: 'success'
                });
                this.maskDialogIsShow = false;
                this.isMaskShow = false;
                this.$emit("cheOptionvalue");
            }
        }
    },
};
</script>


<style lang="scss" scoped>
.show-filter-box {
    display: flex;
    padding: 10px;
    position: relative;
    > div {
        padding: 3px 10px;
        background: #f3f3f2;
        border-radius: 100px;
        margin-right: 10px;
        cursor: pointer;
    }
    .resetting-btn {
        line-height: 27px;
        position: absolute;
        right: 20px;
        cursor: pointer;
    }
}
.tab-filter-box {
    .tab-filter-p {
        font-size: 14px;
        color: #000000;
        margin-bottom: 10px;
    }
    .tab-filter-list {
        display: flex;
        flex-wrap: wrap;
        > div {
            flex-shrink: 0;
            margin: 0 20px 10px 0;
            width: 120px;
            height: 40px;
            background: #f3f3f2;
            color: #000000;
            text-align: center;
            line-height: 40px;
            border-radius: 20px;
            cursor: pointer;
        }
        .avater {
            color: #FFFFFF;
            background: #3388ff;
        }
    }
}
.appointmentList {
    width: 345px;
    position: relative;
    .select-custom-box {
        padding: 7.5px 0;
        background: #f3f3f2;
        display: flex;
        justify-content: space-around;
    }
    ::v-deep.search-box {
        .el-form {
            display: flex;
        }
        .sele-w {
            width: 100px;
            margin-right: 10px;
        }
        .input-w {
            width: 300px;
            margin-right: 10px;
        }
    }
    ::v-deep.search-box-select {
        .el-form {
            display: flex;
        }
        .sele-w {
            margin-right: 10px;
        }
    }

    .info-list-box {
        height: 690px;
        overflow: auto;
        padding-right: 5px;
        position: relative;
        .mask-div {
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            .mask-btn-box {
                width: 100%;
                position: absolute;
                bottom: 0;
                .mask-btn-div {
                    background: #FFFFFF;
                    width: 100%;
                    height: 40px;
                    text-align: center;
                    line-height: 40px;
                    border-bottom: 2px solid #f3f3f2;
                    cursor: pointer;
                }
            }
        }
        .info-list-row {
            display: flex;
            justify-content: space-between;
            border-bottom: 1px #e8dcdc solid;
            // border-radius: 5px;
            // padding: 10px;
            padding-left: 10px;
            margin-bottom: 10px;

            &:last-child {
                margin-bottom: 0;
            }
            .info-box {
                width: 100%;

                .name-info {
                    height: 40px;
                    display: flex;
                    align-items: center;
                    font-size: 14px;
                    display: flex;
                    justify-content: space-between;
                    .name {
                        margin-right: 10px;
                    }
                    .phone {
                    }
                }
                .order-info {
                    padding: 10px 0;
                    font-size: 14px;

                    .order-1 {
                        margin-bottom: 5px;
                        span {
                        }
                    }
                    .order-2 {
                        margin-bottom: 5px;
                        span {
                            margin-right: 10px;
                        }
                    }
                    .order-3 {
                        margin-bottom: 5px;
                        span {
                        }
                    }
                }
                .good-info {
                    padding: 10px 0;
                    .good-info-row {
                        display: flex;
                        margin-bottom: 10px;
                        cursor: pointer;
                        &.acitve {
                            background: #f8f8f8;
                            border-radius: 5px 0 0 5px;
                        }
                        &:hover {
                            background: #f8f8f8;
                            border-radius: 5px 0 0 5px;
                        }
                        &:last-child {
                            margin-bottom: 0;
                        }
                        .img-box {
                            width: 80px;
                            height: 80px;
                            margin-right: 10px;
                            img {
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                                border-radius: 5px;
                            }
                        }
                        .content-box {
                            width: calc(100% - 92px);
                            display: flex;
                            // align-content: space-between;
                            // flex-wrap: wrap;
                            flex-direction: column;
                            justify-content: space-between;
                            .title {
                                font-size: 14px;
                                // margin-bottom: 20px;  display: -webkit-box;
                                text-overflow: -o-ellipsis-lastline;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                display: -webkit-box;
                                -webkit-line-clamp: 2;
                                -webkit-box-orient: vertical;
                                span {
                                }
                            }
                            .doc {
                                font-size: 12px;
                                span {
                                    margin-right: 10px;
                                }
                            }
                        }
                    }
                }
            }
            .operation {
                width: 100px;
                display: flex;
                justify-content: center;
                align-items: center;
                .but-box {
                    div {
                        margin-bottom: 10px;
                        text-align: center;
                    }
                }
            }
        }
    }
    .overflowHide {
        overflow: hidden;
    }
    .info-list-box::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
    }
    .info-list-box::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
        background: #ccc; //rgba(0, 0, 0, 0.0);
        scrollbar-arrow-color: red;
    }
    .info-list-box::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0);
        border-radius: 0;
        background: rgba(0, 0, 0, 0);
    }
    .filterBox {
        width: 60px;
        height: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        cursor: pointer;
        span {
            height: 25px;
        }
        .icon-font {
            line-height: 20px;
        }
        
        img {
            width: 12px;
            height: 12px;
            margin-top: 3px;
            margin-left: 5px;
        }
    }
}
</style>
